<template>
	<view>
		<view class="search">
			<view class="flex-y-center box">
				<image src="@/static/img/sousuo.png" class="icon"></image>
				<input placeholder="请输入搜索内容" v-model="kwd" class="flex-grow-1 ipt" />
				<button class="btn" @click="kwdSearch">搜索</button>
			</view>
		</view>
		<view class="area flex-y-center">
			<view class="title flex-grow-0" :class="index == tabIndex ? 'active':''" v-for="(item,index) in tabList" :key="index"
				@tap="chageTab(index)">{{item.name}}</view>
		</view>

		<view class="head-list" v-for="(item,index) in orderList" :key="index">
			<checkbox-group @change="chooseShopSelect(index)">
				<view class="list-left flex-y-center">
					<checkbox :checked="item.ischeck">{{item.store_name}}</checkbox>
				</view>
			</checkbox-group>

			<view v-for="(item2,index2) in item.list" :key="index2">
				<view class="list-next flex-y-center">
					<checkbox-group @change="chooseGoodsSelect(index, index2)">
						<checkbox :checked="item2.selected"></checkbox>
					</checkbox-group>
					<image :src="item2.store_image"></image>
					<view class="list-right">
						<view class="title">放单时间:{{item2.order_day}}</view>
						<view class="flex-bet">
							<view>餐标：{{item2.store_price}}</view>
							<view>x{{item2.success_num}}(单)</view>
						</view>
						<view class="flex-bet">
							<view>合计：{{item2.pay_price}}</view>
							<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.platform=='meituan'"></image>
							<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.platform=='eleme'"></image>
						</view>
					</view>
				</view>
				<view class="list-bottom">评鉴规则：{{item2.rule}}</view>
			</view>
		</view>

		<view style="width: 100%;height: 120rpx;"></view>
		<checkbox-group @change="chooseCheckAll()">
			<view class="flex-y-center buttom">
				<checkbox class="flex-grow-1" :checked="allchecked">全选</checkbox>
				<view class="price">合计:<text>¥{{total}}</text></view>
				<button class="btn" @click="paytab">去结算</button>
			</view>
		</checkbox-group>
	</view>
</template>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	import {getSettlementList,muiltpay,getCityList} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [],
				orderList: [],
				//全选
				allchecked: false,
				// 总价
				total: 0,
				lock:0,
				kwd:'',
			}
		},
		onShow() {
		    this.loadData();
		},		
		methods: {
			//获取数据
			loadData: function() {
				let region_id = uni.getStorageSync('region_id');
				getCityList({region_id:region_id||0}).then((res) => {
					if (res.code == 1) {
						this.tabList = res.data.tabList;
						this.region_id = res.data.tabList[this.tabIndex].id || 0;
						this.loadDataList();
					}
				}).catch(err => {
					console.log(err)
				})
			
			},
			//获取数据
			loadDataList: function() {
				getSettlementList({region_id:this.region_id,kwd:this.kwd}).then((res) => {
					if (res.code == 1) {
						if (!res.data.length) {
							uni.showToast({
								title:'暂无可结算订单',
								icon:"error"
							});
							return;
						}
						this.orderList = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			
			},
			callpay:function(){
				let that = this;
			    if (typeof WeixinJSBridge == "undefined") {
			        if (document.addEventListener) {
			            document.addEventListener('WeixinJSBridgeReady', that.jsApiCall(), false);
			        } else if (document.attachEvent) {
			            document.attachEvent('WeixinJSBridgeReady', that.jsApiCall());
			            document.attachEvent('onWeixinJSBridgeReady', that.jsApiCall());
			        }
			    } else {
			        that.jsApiCall();
			    }
			},
			
			jsApiCall: function(){
				let that = this;
				let payParam = that.payParam;
				
			    WeixinJSBridge.invoke(
			        'getBrandWCPayRequest', {
			            appId: payParam.appId,
			            nonceStr: payParam.nonceStr,
			            package: payParam.package,
			            signType: payParam.signType,
			            timeStamp: payParam.timeStamp,
			            paySign: payParam.paySign
			        },
			        function (res) {
			            if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								title:'支付成功',
								icon:"success"
							});
							setTimeout(function(){
								 that.orderList = [];
								 that.loadDataList();
							},1000);
			            } else {
			                WeixinJSBridge.log(res.err_msg);
							uni.showToast({
								title:'支付失败',
								icon:"error"
							});
							that.lock = 0;			
			            }
			        }
			    );
			},
			
			//订单支付
			paytab(id){
				let that = this;
				let orderList = that.orderList;
				let ids = '';
				for (let i = 0; i < orderList.length; i++) {
					for (let j = 0; j < orderList[i].list.length; j++) {
						if (orderList[i].list[j].selected) {
							ids += orderList[i].list[j].id+','
						}
					}
				}
				if (!ids) {
					uni.showToast({
						title:'请先选择结算项',
						icon:"error"
					});
					return;
				}
				if (that.lock==1) {
					return;
				}
				that.lock = 1;
				muiltpay({ids:ids}).then((res) => {
					if(res.code == 1){
						that.payParam = res.data.wx;
						that.callpay();
					}else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						});
						that.lock = 0;
					}
				}).catch(err => {
					console.log(err)
				});
			},
			//查询
			kwdSearch(){
				this.orderList = [];
				this.loadDataList();
			},
			chageTab(index) {
				this.tabIndex = index;
				this.region_id = this.tabList[index].id || 0;
				this.orderList = [];
				this.loadDataList();
			},

			// 计算总价
			totalPrice() {
				let orderList = this.orderList;
				let total = 0;
				for (let i = 0; i < orderList.length; i++) {
					for (let j = 0; j < orderList[i].list.length; j++) {
						if (orderList[i].list[j].selected) {
							//total += orderList[i].list[j].limit*orderList[i].list[j].num
							total += orderList[i].list[j].pay_price*1
							console.log(total)
						}
					}
				}
				this.total = total.toFixed(2);
			},
			// 店铺选中反选
			chooseShopSelect(index) {
				let orderList = this.orderList;
				orderList[index].ischeck = !orderList[index].ischeck;
				for (let i = 0; i < orderList[index].list.length; i++) {
					orderList[index].list[i].selected = orderList[index].ischeck
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 商品选中反选
			chooseGoodsSelect(index, index2) {
				let orderList = this.orderList;
				let count = 0;
				let listList = orderList[index].list; // 当前店铺下商品列表
				let list = listList[index2]; // 当前商品数组

				if (list.selected) {
					orderList[index].list[index2].selected = false; // 改变当前商品状态
					orderList[index].ischeck = false; // 改变店铺状态
				} else {
					orderList[index].list[index2].selected = true;
					let shoplistNum = orderList[index].list.length; // 店铺总个数
					let listArray = orderList[index].list;
					let selectedNum = 0;
					for (var i in listArray) {
						if (listArray[i].selected) {
							selectedNum++
						}
					}
					if (selectedNum == listArray.length) {
						orderList[index].ischeck = true
					} else {
						orderList[index].ischeck = false
					}
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 全选条件 店铺全选  反之 
			checkAllCondition() {
				let isCheckAll = this.isCheckAll;
				let orderList = this.orderList; // 购物车列表数据
				let isCheckAllNum = 0;
				for (let i = 0; i < orderList.length; i++) {
					if (orderList[i].ischeck == true) {
						isCheckAllNum++
					}
				}
				if (isCheckAllNum == orderList.length) {
					this.isCheckAll = true;
				} else {
					this.isCheckAll = false;
				}
				this.totalPrice()
			},
			// 点击全选
			chooseCheckAll() {
				let orderList = this.orderList;
				let isCheckAll = this.isCheckAll;
				if (isCheckAll) {
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
				}
				for (let i = 0; i < orderList.length; i++) {
					orderList[i].ischeck = this.isCheckAll;
					for (let j = 0; j < orderList[i].list.length; j++) {
						orderList[i].list[j].selected = this.isCheckAll
					}
				}
				this.totalPrice()
			}
		}
	}
</script>

<style>
	page {
		margin-bottom: 200rpx;
	}

	.search {
		background: #4fbeff;
		padding: 20upx 25rpx;
	}

	.search .box {

		border: 1px solid #4fbeff;
		border-radius: 40upx;
		padding: 10upx;
		background: #fff;
	}

	.search .box .ipt {
		margin-left: 10rpx;
		font-size: 30rpx;
	}

	.search .box .icon {
		width: 40upx;
		height: 40upx;
	}

	.search .box .btn {
		background: #4fbeff;
		padding: 0 30rpx;
		font-size: 26rpx;
		border-radius: 40rpx;
		color: #fff;
	}

	.area {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px;
		padding: 12px 12px;
		font-size: 28rpx;
		word-wrap:break-word;
		/* overflow:hidden; */
		overflow-y: scroll;
	}

	.area .title {
		border-radius: 40rpx;
		border: 1px solid #333;
		color: #333;
		padding: 3px 13px;
		margin-right: 10px;
	}

	.area .active {
		background: #4fbeff;
		color: #fff;
		border: 1px solid #4fbeff;

	}

	.head-list {
		margin: 9px 14px;
		border-radius: 9px;
		background-color: #fff;
		padding: 9px 7px 0
	}

	.head-list .list-left view:nth-child(1) {
		color: #bec1c7;
		font-size: 24rpx
	}

	.head-list .list-left view:nth-child(2) {
		color: #eb2622;
		font-size: 12px
	}

	.head-list .list-next {
		margin-top: 7px;
		padding-bottom: 7px;
		border-bottom: 1px solid #f4f5f7;
		margin-left: 30rpx;
	}

	.head-list .list-next image {
		width: 76px;
		height: 57px;
		border-radius: 7px
	}

	.head-list .list-next .list-right {
		flex: 1;
		margin-left: 7px;
		color: #999;
		font-size: 24rpx;
		margin-top: 4px;
		line-height: 45rpx;
	}

	.head-list .list-next .list-right .title {
		color: #333;
		font-size: 30rpx;
	}

	.head-list .list-next .list-right .icon {
		width: 40rpx;
		height: 40rpx;
	}

	.head-list .list-bottom {
		color: #999;
		font-size: 24rpx;
		padding: 7px 0;
		border-bottom: 1px solid #f4f5f7
	}

	.head-list .list-expire {
		color: #333;
		font-size: 28rpx;
		font-weight: 700
	}

	.head-list .list-expire .amount {
		font-size: 30rpx;
		color: #eb2sx622;
		margin: 0 2px
	}

	.buttom {
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 97%;
		padding-left: 3%;
		font-size: 30rpx;
	}

	.buttom .price text {
		color: #b7334a;
		font-size: 34rpx;
		margin: 0 20rpx;
	}

	.buttom .btn {
		background: #4fbeff;
		color: #fff;
		font-size: 30rpx;
		border-radius: 0;
		padding: 10rpx 0;
		width: 200rpx;
	}
</style>
